<template>
    <div>
        <form >
            <p>姓名： <input type="text" v-model="obj.Name"></p>
            <p>性别：
                <input type="radio" value="男"  v-model="obj.Sex">男
                <input type="radio" value="女"  v-model="obj.Sex">女
            </p>
            <p>年龄： <input type="number"  v-model="obj.Age"></p>
            <p>班级：
                <select  v-model="obj.sClass">
                    <option  disabled>请选择</option>
                    <option value="23级全栈开发1班">23级全栈开发1班</option>
                    <option value="23级全栈开发2班">23级全栈开发2班</option>
                    <option value="23级实施运维3班">23级实施运维3班</option>
                    <option value="23级实施运维4班">23级实施运维4班</option>
                    <option value="23级实施运维5班">23级实施运维5班</option>
                </select>
            </p>
            <p><input type="button" value="确认" @click="submit"><input type="button" value="取消" @click="router.push('/')"></p>
        </form>
    </div>
</template>
<script setup>
import { addData, editData, fetchSigleData } from '@/router/utils';
import { onMounted, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route =useRoute()
const router =useRouter()
let obj =ref({ })
obj.value.sClass='请选择'
if(route.params.id){
    onMounted(async ()=>{
       const data = await fetchSigleData(route.params.id)
       Object.assign(obj.value,data.data)
    })
}
async function submit(){
    if(route.params.id){
        await editData(route.params.id,obj.value)
        alert('编辑成功')
    }
    else{
            await addData(obj.value)
    alert('新增成功')
    }

    router.push('/')
}
</script>